<template>
	<div class="wrapper" v-loading="loading">
		<div class="header">
			<div class="web-logo" @click="onToggle">
				<img src="../../assets/images/web-logo.png" alt="" />
			</div>
			<h1>生产过程数据可视化大屏</h1>
			<div class="date">{{ date }}</div>
		</div>
		<div class="main">
			<div class="table-thead">
				<ul>
					<li v-for="column in theadText" :key="column.name" :style="{ width: column.width }" class="table-thead-column-item">{{ column.name }}</li>
				</ul>
			</div>
			<div class="table-body">
				<el-carousel style="flex: 1" :interval="10000" direction="vertical" v-if="!noData">
					<el-carousel-item v-for="(singlePage, idx) in tableData" :key="idx">
						<ul class="wrapper">
							<li class="row" :style="{ color: item.type === '1' ? '#D8FFF4' : '#ff0000' }" v-for="(item, index) in singlePage" :key="index">
								<ul v-show="typeof item === 'object'">
									<li :style="[{ width: theadText[0].width }]">{{ item.index }}</li>
									<li :style="[{ width: theadText[1].width }]">{{ item.repairNumber }}</li>
									<li :style="[{ width: theadText[2].width }]">{{ item.productModel }}</li>
									<li :style="[{ width: theadText[3].width }]" :class="{ undertint: !item.productNumber }">{{ item.productNumber || "/" }}</li>
									<li :style="{ width: theadText[4].width }" v-if="item.processSchedule && item.processSchedule.length <= 10">{{ item.processSchedule }}</li>
									<li :style="{ width: theadText[4].width }" v-if="item.processSchedule && item.processSchedule.length > 10">
										<div class="scroll-container">
											<div class="scroll-text">{{ item.processSchedule }}</div>
										</div>
									</li>
									<li :style="{ width: theadText[4].width }" v-if="!item.processSchedule">{{ item.processSchedule }}</li>
									<li :style="[{ width: theadText[5].width }]" :class="{ undertint: !item.workshopSection }">{{ item.workshopSection || "/" }}</li>
									<li :style="[{ width: theadText[6].width }, { color: item.type === '1' ? '#00FF06' : '#ff0000' }]">{{ item.status }}</li>
								</ul>
								<ul v-show="typeof item == 'string'">
									<li style="width: auto; color: #00ffff">{{ item }}</li>
								</ul>
							</li>
						</ul>
					</el-carousel-item>
				</el-carousel>
				<div class="no-data" v-if="noData">
					<img src="../../assets/images/meiyoushuju.png" alt="" />
					<div>暂无数据</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import screenfull from "screenfull"
import { repairOrderProductList } from "@/api/home.js"
import { reorganizeData } from "./fn.js"

export default {
	data() {
		return {
			isFullscreen: false,
			noData: false,
			date: "",
			dateTimer: null,
			listTimer: null,
			theadText: [
				{
					name: "序号",
					width: "6%"
				},
				{
					name: "返修单号",
					width: "16%"
				},
				{
					name: "返修产品",
					width: "18%"
				},
				{
					name: "产品编号",
					width: "16%"
				},
				{
					name: "工艺进度",
					width: "20%"
				},
				{
					name: "工段",
					width: "16%"
				},
				{
					name: "状态",
					width: "8%"
				}
			],
			tableData: [],
			req_interval: 30 * 60 * 1000,
			loading: false,
			saveTempData: []
		}
	},
	created() {
		this.getDate()
		this.getList()
	},
	mounted() {
		this.init()
		this.dateTimer = setInterval(this.getDate, 10 * 1000)
		this.listTimer = setInterval(this.getList, this.req_interval)
	},
	beforeDestroy() {
		this.destroy()
		clearInterval(this.dateTimer)
		clearInterval(this.listTimer)
	},
	methods: {
		getDate() {
			const now = new Date()
			const year = now.getFullYear()
			const month = now.getMonth() + 1
			const date = now.getDate()
			const dayOfWeek = now.getDay()
			const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
			const dayOfWeekName = days[dayOfWeek]
			this.date = `${year}年${month}月${date}日 ${dayOfWeekName}`
		},
		async getList() {
			try {
				this.loading = true
				const res = await repairOrderProductList()
				// console.log(res)
				if (res.data) {
					let tempArr = []
					for (let key in res.data) {
						tempArr.push(`${key}（${res.data[key].length}套）`)
						if (Array.isArray(res.data[key])) {
							for (let i = 0; i < res.data[key].length; i++) {
								res.data[key][i]["index"] = i + 1
								tempArr.push(res.data[key][i])
							}
						}
					}
					const group = this.chunkArray(tempArr, 10)

					const firstRunResult = reorganizeData(group)

					if (firstRunResult[1]) {
						const partialData = this.repetitiveExecution(firstRunResult[0]) //重复执行 把二维数组里的最后两个子数组拿出去给最后一个子数组查找用
						const rawDataSlice = firstRunResult[0].slice(0, -2) //这个-2代表的意思是我调repetitiveExecution这个函数时，第一次就是取了后面的两个子数组(怎么取得的呢？arr.slice(-2) 就是这个-2)
						this.tableData = rawDataSlice.concat(partialData)
						// console.log("tableData", this.tableData)
					} else {
						this.tableData = firstRunResult[0]
						console.log("tableData", this.tableData)
					}
					this.noData = false
				} else {
					this.tableData = []
					this.noData = true
				}
				this.loading = false
			} catch (error) {
				this.loading = false
				console.error(error)
			}
		},
		repetitiveExecution(arr) {
			const sliceData = reorganizeData(arr.slice(-2))
			// 如果返回的结果小于2的长度
			if (sliceData[0].length <= 2) {
				//如果还有多余的数据
				if (sliceData[1]) {
					this.repetitiveExecution(sliceData[0])
				} else {
					return this.saveTempData.concat(sliceData[0])
				}
			} else {
				this.saveTempData.concat(sliceData.slice(0, -2))
				this.repetitiveExecution(sliceData[0])
			}
		},
		chunkArray(array, chunkSize) {
			const result = []
			for (let i = 0; i < array.length; i += chunkSize) {
				const chunk = array.slice(i, i + chunkSize)
				result.push(chunk)
			}
			return result
		},
		onToggle() {
			if (!screenfull.isEnabled) {
				this.$message({ message: "你的浏览器不支持全屏", type: "warning" })
				return false
			}
			screenfull.toggle()
		},
		change() {
			this.isFullscreen = screenfull.isFullscreen
		},
		init() {
			if (screenfull.isEnabled) {
				screenfull.on("change", this.change)
			}
		},
		destroy() {
			if (screenfull.isEnabled) {
				screenfull.off("change", this.change)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.wrapper {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-color: #38727f;
	.header {
		height: 6.25rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		white-space: nowrap;
		overflow: hidden;
		padding: 0 2%;
	}
	.main {
		width: 100%;
		height: calc(100% - 6.25rem);
		box-sizing: border-box;
		padding: 0 20px 20px 20px;
	}
}

.header {
	.web-logo {
		width: 12%;
		height: auto;

		img {
			width: 4.25rem;
			height: 5.125rem;
			position: relative;
			top: 0.375rem;
		}
	}
	h1 {
		width: 50%;
		font-family: Microsoft YaHei;
		font-weight: bold;
		font-size: 3rem;
		color: #00e1fc;
		background: linear-gradient(to bottom, #ffffff, #76f6ff);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		letter-spacing: 0.25rem;
		text-align: center;
	}
	.date {
		min-width: 16%;
		font-size: 1.5rem;
		color: #ffffff;
		text-align: right;
		letter-spacing: 1px;
	}
}

.main {
	.table-thead {
		width: 100%;
		height: 4.375rem;
		overflow: hidden;
		ul {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			background-color: #108c98;
			border-radius: 10px;
		}
		ul > li {
			font-size: 1.875rem;
			color: #00ffdf;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 5.25rem;
			letter-spacing: 2px;
		}
	}
	.table-body {
		width: 100%;
		height: calc(100% - 4.375rem);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		.el-carousel {
			height: 100%;
			::v-deep .el-carousel__container {
				height: 100%;
				.wrapper {
					width: 100%;
					height: 100%;
					.row {
						width: 100%;
						height: 10%;
					}
				}
			}
		}
		.no-data {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-content: center;
			font-size: 16px;
			letter-spacing: 2px;
			color: #f8f8f8;
			text-align: center;
			user-select: none;
			img {
				width: 200px;
				height: 200px;
				opacity: 0.7;
				margin: 0 auto;
			}
		}
	}
}

.row {
	ul {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}
	ul > li {
		font-size: 1.875rem;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex-shrink: 0;
		letter-spacing: 2px;
	}
	.undertint {
		color: rgba(255, 255, 255, 0.4);
	}
}

.wrapper .row:nth-child(2n) {
	background-color: #03707c;
}

.scroll-container {
	overflow: hidden;
	white-space: nowrap;
}

.scroll-text {
	display: inline-block;
	padding-left: 100%;
	animation: scroll-left 7s linear infinite;
}

@keyframes scroll-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}
</style>
